<template>
	<a-menu
		mode="horizontal"
		@click="handleMenuClick"
		class="control-header app-control-menu__header no-padding"
	>
		<template v-for="item in menus" :key="item.name">
			<slot
				v-if="hasSlot(item.name)"
				:item="item"
				:counterData="props.counterData"
				:name="item.name"
			>
			</slot>
			<slot
				v-else-if="hasSlot('MenuBody')"
				:item="item"
				:counterData="props.counterData"
				name="MenuBody"
			>
			</slot>
			<AppMenuitem v-else :item="item"></AppMenuitem>
		</template>
	</a-menu>
	<div class="control-content app-control-menu__content">
		<component
			:is="props.openViewCodeName"
			:context="props.context"
			:viewParams="props.viewParams"
			:name="props.openViewCodeName"
			openType="EMBED"
		/>
	</div>
</template>

<script lang="ts" setup>
import AppMenuitem from './menu-item.vue';
import { MenuProps } from '../menu';
const props = defineProps(MenuProps);
const emit = defineEmits(['menuClick']);
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};
const handleMenuClick = ({ key }: any): void => {
	emit('menuClick', key);
};
</script>
